@charset "utf-8";
@import "reset";
@import "icon";

$hover_color:#1428a0;

header{
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #eeeeee;
    .top_main{
        width: 1231px;
        height: inherit;
        margin: auto;
        div:first-child{
            height: 20px;
            margin-top: 22px;
            img{
                height: 100%;
            }
        }
        div:last-child{
            margin-top: 15px;
            a{
                color: black;
                margin-top: 22px;
                font-size: 16px;
                line-height: 32px;
                vertical-align: middle;
                &:hover{
                    color: $hover_color;
                }
            }
            i:first-of-type{
                font-size: 19px;
                margin-right: 3px;
            }
            i:nth-of-type(2){
                margin-left: 13px;
                font-size: 28px;
                vertical-align: middle;
            }
        }
    }
}
.main{
    width: 100%;
    font-size: 0;
    >div{
        width: 1280px;
        height: 750px;
        border-bottom: 1px solid #eeeeee;
        margin: auto;
        padding-top: 42px;
        >ul{
            width: 100%;
            height: 70px;
            font-size:0;
            position: relative;
            li{
                display: inline-block;
                width: 320px;
                height: 70px;
                span{
                    font-weight: bold;
                    text-align: center;
                    font-size: 16px;
                    color:white;
                    width: 36px;
                    height: 36px;
                    line-height: 36px;
                    display: block;
                    border-radius: 50%;
                    background-color:$hover_color;
                    margin: 0 auto 15px auto;
                    z-index: 1;
                }
                p{
                   font-size: 16px;
                   text-align: center;
                   color: $hover_color;
                }
                   
            }
            li:nth-of-type(3){
                span{
                    background-color: #ccc;
                }
                p{
                    color:#ccc;
                }
            }
            li:nth-of-type(4){
                span{
                    background-color: #ccc;
                    font-size: 23px;
                }
                p{
                    color:#ccc;
                }
            }
            >div{
                width: 100%;
                height: 4px;
                background-color: #ccc;
                position: absolute;
                top:18px;
                z-index: -1;
                &::before{                
                    content: "";
                    height: 4px;
                    width: 45%;
                    background-color: #1428a0;
                    display: inline-block;
                }
                &::after{
                    content: "";
                    height: 4px;
                    width: 10%;
                    display: inline-block;
                    background:linear-gradient(to right,#1428a0 0,#ccc 100%);
                }
                
            }
           
        }
        >div{
            width: 1220;
            height: 453px;
            margin: 50px auto 0;
            background:#f9f9f9 ;
            padding-top:55px ;
            padding-left: 132px;
            form:first-of-type{
                vertical-align: top;
                width: 480px;
                display: inline-block;
                h2{
                    font-size: 24px;
                    color: black;
                }
                h3{
                    font-size: 16px;
                    line-height: 50px;
                    
                }
                p{
                    font-size: 14px;
                    color: #333333;
                    line-height: 32px;
                }
                input:first-of-type{
                    width: 343px;
                    height: 28px;
                    border: 1px solid #e5e5e5;
                    padding-left: 7px;
                    display: block;
                    &:focus{
                        border: 1px solid $hover_color;
                    }
                }
                h4{
                    color: #d52c2c;
                    font-size: 14px;
                    font-weight: normal;
                    display: none;
                }
                >div{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    border: 1px solid #cccccc;
                    border-radius: 3px;
                    background: #ffffff;
                    cursor: pointer;
                    
                    i{
                        color: white;
                    }
                }
                p:nth-of-type(2){
                    display: inline-block;
                    margin-left: 10px;
                }
                p:nth-of-type(3){
                    margin-top: 20px;
                }
                input:nth-of-type(2){
                    width: 343px;
                    height: 28px;
                    border: 1px solid #e5e5e5;
                    padding-left: 7px;
                    display: block;
                    &:focus{
                        border: 1px solid $hover_color;
                    }
                }
                a:first-of-type{
                    font-size: 14px;
                    color: #1428a0;
                    line-height: 32px;
                    display: block;
                }
                input:nth-of-type(3){
                    width: 150px;
                    height: 50px;
                    background: $hover_color;
                    color: white;
                    font-size: 16px;
                    cursor: pointer;
                    &:hover{
                        background:#006ec5 ;
                    }
                }
                
            }
            >form:last-of-type{
                height: 305px;
                display: inline-block;
                margin-top: 37px;
                padding-left: 130px;
                border-left: 1px solid #ececec;
                h3{
                    font-size: 16px;
                }
                p:first-of-type{
                    font-size: 16px;
                    color: #b7b7b7;
                    line-height: 36px;
                }
                >div{
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    border: 1px solid #cccccc;
                    border-radius: 3px;
                    background: #ffffff;
                    cursor: pointer;
                    &:focus{
                        background-color: blue;
                    }
                    i{
                        color: white;
                    }
                }
                p:nth-of-type(2){
                    margin-top: 15px;
                    display: inline-block;
                    margin-left: 10px;
                    font-size: 14px;
                    a{
                        text-decoration: underline;
                        color: #0071bf;
                    }
                }
                input{
                    width: 210px;
                    height: 50px;
                    font-size: 16px;
                    background: #a6a8aa;
                    color: white;
                    display: block;
                    margin-top: 10px;
                    cursor: pointer;
                }
            }
        }
        
    }
}

footer{
    width: 100%;
    padding-top: 20px;
    text-align: center;
    p{
        font-size: 12px;
        color: #666666;
        line-height: 16px;
    }
}
.main > div > div > form:last-of-type .caa{
    background: #1428a0;
    &:hover{
        background:#006ec5;
    }
    
}
